<template>
      <div class="middle" style="width: 100%">
        <div class="block">
          <div class="radio">
            排序：
            <el-radio-group v-model="reverse">
              <el-radio :label="true">倒序</el-radio>
              <el-radio :label="false">正序</el-radio>
            </el-radio-group>
          </div>

          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities2"
              :key="index"
              :timestamp="activity.timestamp"
              :type="activity.type"
              :size="activity.size"
            >
              <h1>{{activity.content}}</h1>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
</template>

<script>
    export default {
      data() {
        return {
          reverse: false,

          activities2: [{
            content: '滨江大桥桥头伸缩缝集中处置',
            timestamp: '2021-03-02 至 2021-03-22',
            type: 'primary',
            size: 'large',
          }, {
            content: '滨江大桥桥间伸缩缝集中处置',
            timestamp: '2021-03-22 至 2021-04-12',
            type: 'primary',
            size: 'large',
          }, {
            content: '滨江大桥桥尾伸缩缝集中处置',
            timestamp: '2021-04-12 至 2021-04-30',
            type: 'primary',
            size: 'large',
          }, {
            content: '滨江大桥桥头路面沥青铺装',
            timestamp: '2021-05-1 至 2021-05-20',
            size: 'large',
          }]

        };
      }
    }
</script>

<style lang="scss" scoped>
  .middle{
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
      .radio{
        padding-bottom: 40px;
    }

  }
</style>
